<template lang='pug'>
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 日期：
          DatePicker(placeholder="请选择" :value="searchData.Date" clearable @on-change="dateChange")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          Button.ml-15(type="info" @click="searchBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe border :columns="thead" :data="listData")
        template(slot-scope="{ row, index }" slot="name")
          .font-12.time-td.ellipsis(v-for="(item,index) in tableName" :key="index")
            span {{item}}
        template(slot-scope="{ row, index }" slot="target")
          .font-12.time-td.ellipsis(v-for="(item,index) in target" :key="index")
            span {{item}}
        template(slot-scope="{ row, index }" slot="finish")
          .font-12.time-td.ellipsis(v-for="(item,index) in finish" :key="index")
            span {{item}}
        template(slot-scope="{ row, index }" slot="rate")
          .font-12.time-td.ellipsis(v-for="(item,index) in rate" :key="index")
            span {{item}}%
        
</template>

<script>
import KanbanApi from '../service.api.js'

export default {
  name:'',
  props:{},
  data () {
    return {
      searchData: {
        UserIds:'',
        Date: this.$moment(new Date()).format('YYYY-MM-DD'),
      },
      thead: [
        {
          title: '任务项',
          minWidth: 150,
          align: 'center',
          slot: 'name',
          className: 'no-padding'
        },
        {
          title: '目标任务',
          minWidth: 150,
          align: 'center',
          slot: 'target',
          className: 'no-padding'
        },
        {
          title: '已完成',
          minWidth: 150,
          align: 'center',
          slot: 'finish',
          className: 'no-padding'
        },
        {
          title: '完成率',
          minWidth: 150,
          align: 'center',
          slot: 'rate',
          className: 'no-padding'
        }
      ],
      tableName: ['年目标','月度合同目标金额','月度A开发目标数量','月度B开发目标数量','月度C开发目标数量','周合同目标金额','周A开发目标数量','周B开发目标数量','周C开发目标数量'],
      loading: false,
      listData: [],
      target: [],
      finish: [],
      rate: []
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList()
  },

  methods: {
    getList () {
      this.loading = true
      KanbanApi.GetKanbanList(this.searchData).then(res => {
        this.loading = false
        let arr_1 = [], arr_2 = [], arr_3 = []
        if (res.data.success) {
          this.listData = res.data.data
          this.listData.forEach(item => {
            arr_1.push(item.yearTarget, item.monthTarget, item.month_ATargetCount, item.month_BTargetCount, item.month_CTargetCount, item.weekTarget, item.week_ATargetCount, item.week_BTargetCount, item.week_CTargetCount)

            arr_2.push(item.year_SignedAmt, item.month_SignedAmt, item.month_AFinishCount, item.month_BFinishCount, item.month_CFinishCount, item.week_SignedAmt, item.week_AFinishCount, item.week_BFinishCount, item.week_CFinishCount)

            arr_3.push(item.year_FinishRate, item.month_FinishRate, item.month_AFinishRate, item.month_BFinishRate, item.month_CFinishRate, item.week_FinishRate, item.week_AFinishRate, item.week_BFinishRate, item.week_CFinishRate)
            this.target = arr_1
            this.finish = arr_2
            this.rate = arr_3
          })
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    dateChange (val) {
      this.searchData.Date = val
    },
    searchBtn () {
      this.getList()
    },
    exportBtn () {

    }
  },

  watch: {}

  }

</script>
<style lang="less">
  .no-padding{
    .ivu-table-cell{
      padding: 0 !important;
    }
    .ivu-poptip{
      width: 100%;
      height: 100%;
    }
    .ivu-poptip-rel{
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
</style>

<style lang='less' scoped>
  .d-flex{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .target{
    text-align: left;
  }
  .time-td{
    padding: 2px 4px;
    height: 56px;
    text-align: center;
    line-height: 52px;
    border-bottom: 1px solid #cfeef9;
    // cursor: pointer;
    &:last-child{
      border-bottom: none;
    }
  }
  .poptip-ul{
    color: #333;
  }
</style>